<template>
    <div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <!-- transition 这个标签专门用来管理动画的 -->
        <!-- appear 属性表示页面初始时候带有动画效果 -->
        <transition appear>
            <h1 v-show="isShow">你好啊</h1>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'Test',
    data() {
        return {
            isShow: true
        }
    }
}
</script>
<style scoped>
h1 {
    background-color: orange;
}

/* 这个class自动绑定的transition标签 */
.v-enter-active {
    animation: aBiu 0.5s;
}

/* 这个class自动绑定的transition标签 */
.v-leave-active {
    animation: aBiu 0.5s reverse;
}

/* 编写动画 */
@keyframes aBiu {
    from {
        transform: translateX(-200px);
    }

    to {
        transform: translateX(0px);
    }
}
</style>